<template>
	<view class="bookshelf-container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title" v-if="!isManageMode">书架</text>
			<text v-else @tap="toggleSelectAll">全选</text>
			<view class="more-btn" @tap="toggleManageMode">
				<text v-if="!isManageMode">
					<uv-icon size="28" name="more-dot-fill"></uv-icon>
				</text>
				<text v-else>取消</text>
			</view>
		</view>
		<!-- 书籍列表 -->
		<view class="book-list">
			<view class="book-item" v-for="(book, index) in books" :key="index" @tap="handleBookClick(book)">
				<view class="book-cover-container">
					<image class="book-cover" :src="book.cover" mode="aspectFill" />
					<view class="book-avatar"></view>
					<!-- 管理模式下的选择框 -->
					<view class="selection-box" v-if="isManageMode" @tap.stop="toggleSelection(index)">
						<view class="selection-icon" :class="{selected: book.selected}"></view>
					</view>
				</view>
				<text class="book-title">{{book.title}}</text>
				<text class="book-status">{{book.status}} 已读{{book.readProgress}}%</text>
			</view>
		</view>
		<!-- 添加书籍按钮 -->
		<view class="book-item add-book" @tap="addBook">
			<view class="add-icon">+</view>
			<text class="add-text">添加书籍</text>
		</view>
	</view>

	<!-- 底部操作栏 (管理模式显示) -->
	<view class="action-bar" v-if="isManageMode">
		<view class="action-btn delete-btn" @tap="deleteSelected">删除</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isManageMode: false,
				isAllSelected: false,
				books: [{
						cover: '/static/images/bases/baseimg.png',
						title: '斗罗大陆',
						status: '完结',
						readProgress: 1,
						selected: false
					},
					{
						cover: '/static/images/bases/baseimg.png',
						title: '斗罗大陆2',
						status: '连载',
						readProgress: 30,
						selected: false
					},
					// 更多书籍数据...
				]
			}
		},
		methods: {
			// 切换管理模式
			toggleManageMode() {
				this.isManageMode = !this.isManageMode
				if (!this.isManageMode) {
					// 退出管理模式时取消所有选择
					this.books.forEach(book => book.selected = false)
					this.isAllSelected = false
				}
			},
			// 书籍点击处理
			handleBookClick(book) {
				if (this.isManageMode) return
				uni.navigateTo({
					url: `/pages/reader/reader?bookId=${book.id}`
				})
			},
			// 切换选择状态
			toggleSelection(index) {
				this.books[index].selected = !this.books[index].selected
				this.checkAllSelected()
			}, // 检查是否全选
			checkAllSelected() {
				this.isAllSelected = this.books.every(book => book.selected)
			},

			// 全选/取消全选
			toggleSelectAll() {
				const selectStatus = !this.isAllSelected
				this.books.forEach(book => book.selected = selectStatus)
				this.isAllSelected = selectStatus
			},

			// 删除选中书籍
			deleteSelected() {
				uni.showModal({
					title: '提示',
					content: '确定要删除选中的书籍吗？',
					success: (res) => {
						if (res.confirm) {
							this.books = this.books.filter(book => !book.selected)
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				})
			},

			// 添加书籍
			addBook() {
				uni.navigateTo({
					url: '/pages/book-store/book-store'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bookshelf-container {
		background-color: #f6f8fa;
		padding-bottom: 100rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		background-color: #fff;
		height: 48px;

		.title {
			font-size: 24px;
			color: #333;
		}

		.more-btn {
			padding: 10rpx 20rpx;
			font-size: 32rpx;
			color: #666;
		}
	}

	.book-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.book-item {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

		.book-cover-container {
			position: relative;
			width: 100%;
			height: 240rpx;
			margin-bottom: 15rpx;

			.book-cover {
				width: 100%;
				height: 100%;
				background-color: #e8f4ff;
				border-radius: 8rpx;
			}

			.book-avatar {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: #ddd;
				border: 2rpx solid #fff;
			}

			.selection-box {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.8);
				display: flex;
				align-items: center;
				justify-content: center;

				.selection-icon {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;

					&.selected {
						background-color: #02a7f0;
						border-color: #02a7f0;
					}
				}
			}
		}

		.book-title {
			display: block;
			font-size: 28rpx;
			color: #333;
			text-align: center;
			margin-bottom: 8rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.book-status {
			display: block;
			font-size: 24rpx;
			color: #999;
			text-align: center;
		}
	}

	.add-book {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f9f9f9;
		border: 1rpx dashed #ddd;

		.add-icon {
			font-size: 60rpx;
			color: #ccc;
			margin-bottom: 10rpx;
		}

		.add-text {
			font-size: 26rpx;
			color: #999;
		}
	}

	.action-bar {
		position: fixed;
		bottom: 130rpx;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #f59a24;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 40rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.action-btn {
			padding: 15rpx 40rpx;
			font-size: 28rpx;

			&.delete-btn {
				color: #fff;
			}
		}
	}
</style>